<template>
  <div class="watermark-wrap">
    <div class="watermark watermark-item-1">
      <p>{{ account }}</p>
      <p>{{ username }}</p>
    </div>
    <div class="watermark watermark-item-2">
      <p>{{ account }}</p>
      <p>{{ username }}</p>
    </div>
    <div class="watermark watermark-item-3">
      <p>{{ account }}</p>
      <p>{{ username }}</p>
    </div>
    <div class="watermark watermark-item-4">
      <p>{{ account }}</p>
      <p>{{ username }}</p>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'WaterMark',
  data() {
    return {
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    hasUserInfo() {
      return this.userInfo && typeof this.userInfo === 'object'
    },
    account() {
      return this.hasUserInfo ? this.userInfo.account : ''
    },
    username() {
      return this.hasUserInfo ? this.userInfo.userName : ''
    }
  },
  methods: {
  }
}
</script>
<style lang="less" scoped>
    .watermark-wrap{
      position: absolute;
      left: calc(50% + 50px);
      top: 50%;
      z-index: 99999;
      transform: translate(-50%,-50%) translateZ(100);
    }
    .watermark{
      position: absolute;
      transform: translate(-50%,-50%);
      opacity: 0.4;
      & p{
        margin: 0;
        padding: 0;
        line-height: 20px;
        color: #fff;
        font-size: 16px;
        text-align: center;
      }
    }
    .watermark-item-1{
      top: -110px;
      left: -180px;
      transform: translate(-50%,-50%) rotateZ(-45deg);
    }
    .watermark-item-2{
      top: -110px;
      right: -180px;
      transform: translate(-50%,-50%) rotateZ(-45deg);
    }
    .watermark-item-3{
      bottom: -130px;
      right: -130px;
      transform: translate(-50%,-50%) rotateZ(-45deg);
    }
    .watermark-item-4{
      bottom: -130px;
      left: -230px;
      transform: translate(-50%,-50%) rotateZ(-45deg);
    }
</style>
